<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>FIRST</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.container{
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		canvas{
			width: 400px;
			height: 400px;
			border: 10px solid #333333;
		}	
		
		</style>
	</head>
	<body>
		<div class="container">
		<canvas id="canvas" width="500" height="500"></canvas>
		<input type="button" id="light" value="变亮50" />
		<input type="number" id="dark" value="" />
		<input type="button" id="dark1" value="变暗" />
		<input type="button" id="tran" value="透明" />
		</div>
	</body>
	<script>
		window.onload = function() {
			
			let oCanvas = document.getElementById('canvas');
		
			console.dir(oCanvas);
			
			let oPen=oCanvas.getContext("2d");
			
			var image = new Image();
			
			image.src='img/img.png'
			
			image.onload = function(){
				oPen.drawImage(image,0,0,500,500);
				
				//开始坐标 获取像素的宽和高
				//getImageData(x,y,width,height)
//				var imageData = oPen.getImageData(0,0,500,500)
//				var data = imageData.data
//				
//				console.dir(data)
//				
//				document.getElementById('light').onclick = function(){
//				let light = 50
//				for(var i=0;i<data.length;i += 4){
//					data[i + 0] += light
//					data[i + 1] += light
//					data[i + 2] += light
//				}
//				//
//				//
//				oPen.putImageData(imageData,0,0)
//			}
//				
//				document.getElementById('dark1').onclick = function(){
//					let dark =parseInt(document.getElementById("dark").value);
//				for(var i=0;i<data.length;i += 4){
//					data[i + 0] -= dark
//					data[i + 1] -= dark
//					data[i + 2] -= dark
//				}
//				//
//				//
//				oPen.putImageData(imageData,0,0)
//			}
//				document.getElementById('tran').onclick = function(){
//					let dark =parseFloat(document.getElementById("dark").value);
//				for(var i=0;i<data.length;i += 4){
//					
//					data[i + 3] *= dark
//				}
//				//
//				//
//				oPen.putImageData(imageData,0,0)
//			}







            var imageData = oPen.createImageData(100,100);
            var data = imageData.data
            
            for(var i=0;i<data.length;i+=4){
					data[i + 0] = 0
					data[i + 1] = 0
					data[i + 2] = 0
					data[i + 3] = 255
				}
            oPen.putImageData(imageData,0,0)
			}
		}	
	</script>
</html>
